<template>
    <n-scrollbar class="flex-1-hidden">
        <n-menu
            :value="activeKey"
            :collapsed="app.siderCollapse"
            :collapsed-width="theme.sider.collapsedWidth"
            :collapsed-icon-size="22"
            :options="menus"
            :expanded-keys="expandedKeys"
            :indent="18"
            :accordion="true"
            :inverted="!theme.darkMode && theme.sider.inverted"
            @update:value="handleUpdateMenu"
            @update:expanded-keys="handleUpdateExpandedKeys"
        />
    </n-scrollbar>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import type { MenuOption } from 'naive-ui'
import { useAppStore, useRouteStore, useThemeStore } from '@/store'
import { useRouterPush } from '@/composables'
import { getActiveKeyPathsOfMenus, OpenType, translateMenuLabel } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { ResData } from '@/typings/request'

defineOptions({ name: 'VerticalMenu' })

const route = useRoute()
const app = useAppStore()
const theme = useThemeStore()
const routeStore = useRouteStore()
const { routerPush } = useRouterPush()

const menus = computed(() =>
    translateMenuLabel(routeStore.menus as App.GlobalMenuOption[])
)

const activeKey = computed(
    () => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string
)
const expandedKeys = ref<string[]>([])

async function handleUpdateMenu(_key: string, item: MenuOption) {
    const menuItem = item as App.GlobalMenuOption
    console.debug('打开菜单：', menuItem)
    if (menuItem.openType == OpenType.NEW_WINDOW) {
        let url = menuItem.routePath
        if (menuItem.openOption?.urlWithToken) {
            //打开需要拼token
            const { data } = await JBoltApi.tryGet<ResData>(
                '/api/user/info/myOnlineUserToken'
            )
            if (url.includes('?') == false) {
                url += '?'
            }
            url += `&token=${data}`
        }
        //新窗口打开的
        window.open(url)
        return
    }
    routerPush(menuItem.routePath)
}

function handleUpdateExpandedKeys(keys: string[]) {
    expandedKeys.value = keys
}

watch(
    () => route.name,
    () => {
        expandedKeys.value = getActiveKeyPathsOfMenus(activeKey.value, menus.value)
    },
    { immediate: true }
)
</script>

<style scoped></style>
